/**
 * @ 群成员
 * 功能细节见 ./logics/index.ts
 */
import { type RefObject } from 'react'
import type { GroupContact } from '@/services/contact-types/groups'
import Members from './Members'
import s from './index.module.less'
import {
  type AtMember,
  type AtMembers,
  type AtExportItem,
  useAtView,
  useAtList,
  useMembers,
  triggerAt,
} from './logics'

export { triggerAt, type AtMember, type AtExportItem }

export default function AtMembersView(props: {
  inputRef: RefObject<HTMLElement>
  contact: GroupContact
  setAtList: (list: AtExportItem[]) => void
}) {
  const { inputRef, contact, setAtList } = props
  const { view, close } = useAtView(inputRef)
  const members = useMembers({ contact, search: view?.search ?? null })
  const { addAt } = useAtList({
    viewData: view,
    inputRef,
    nodeClassName: s['at-item']!,
    setAtList,
    closeView: close,
  })

  return view !== null && members.length ? (
    <Members
      members={members as AtMembers}
      position={view.position}
      creatorWxid={contact.creatorWxid}
      onConfirm={addAt}
    />
  ) : null
}
